<template>
	<view>
		<!-- 头部导航栏 -->
		<view style="display: flex;justify-content: space-between;align-items: center;padding: 28rpx 20rpx;position:fixed;top:0;left:0;right:0;height: 60px;z-index: 22;background-color: white;">
			<view style="display: flex;position: absolute;z-index: 22;" @click="back">
				<u-icon name="arrow-left"></u-icon>
				<view>返回</view>
			</view>
			
			<view style="flex-direction: column;position: absolute;left: 0;right: 0;height: 100%;display: flex;align-items: center;justify-content: center;">
				<view style="font-weight: bold;padding: 5px;">
					图文草稿箱
				</view>
				<view>
					{{`(${this.$officePost.posts.selected.length}/8)`}}
				</view>
			</view>
			
			<view @click="createNews" style="right: 0;position: absolute;z-index:22;display: flex;align-items: center;;padding: 10rpx 25rpx;margin: 0 25rpx;border-radius: 10rpx;box-shadow: 0 0 14px 0 #66666635;border: solid 1rpx #ddd;">
				<view style="margin-left: 10rpx;">
					确定创建
				</view>
			</view>
		</view>
		
		<view style="padding-top: 60px;"></view>
		
		<view style="margin: 10px">
			<view v-for="(post,index) in posts">
				<view  @click="select(post)" style="border-radius: 5px;overflow: hidden;margin-bottom: 70rpx;box-shadow: 0 0 19px 1px #00000045;">
					<view  style="margin: 0 20rpx;">
						<view style="display:flex;align-items: center;justify-content:space-between;margin: 20rpx 5rpx 10rpx 5rpx;font-size: 13px;">
							<view @click="onPost(post)" style="display: flex;align-items: center;padding: 10rpx 25rpx;margin: 0 0rpx;border-radius: 10rpx;border: solid 1rpx #ddd;">
								<u-icon name="eye" color="#00c110"></u-icon>
								<view style="margin-left: 10rpx;">
									预览
								</view>
							</view>
							
							<view  style="font-size: 13px;border-radius: 10rpx;border: solid 1px #eee;"
								:style="{
									padding:isSelected(post) ? '20rpx' : '20rpx 40rpx',
									backgroundColor: isSelected(post) ? '#00bc06' : 'white'
								}"
							>
							
								<text style="font-size: 12px;" 
									:style="{
										color: isSelected(post) ? 'white' : '#000'
									}"
								>
									{{isSelected(post) ? `(${selectedIndex(post) + 1})取消选择` : '选择'}}
								</text>
							</view>
							
						</view>
						<view style="display:flex;align-items: flex-end;justify-content:space-between;margin: 10rpx 5rpx 20rpx 5rpx;font-size: 13px;">
							<view style="color: #888;">{{'创建日期:' + $dayjs(post.created_at).format('YYYY-MM-DD HH:mm')}}</view>
							<view style="color: #888;">{{'次数:' + 5}}</view>
						</view>
					</view>
					
					<view  style="height: 150px;overflow: hidden;display: flex;align-items: center;position: relative;">
						<image style="width: 100%;" mode="widthFix" :src="absUrl(post.thumb_url)"></image>
						
						<view  style="display: flex;align-items: center;;position: absolute;left: 0;right: 0;top: 60%;bottom: 0;background-image: linear-gradient(0deg,#212121cc,#00000000);padding: 14rpx;overflow: hidden;">
							<view style="color: white;font-weight: bold;font-size: 15px">
								{{post.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
<!-- 	<view style="padding-bottom: 60px;"></view>
	
	<view @click="showComfirmModal=true" style="
		position: fixed;bottom: 0;
		left:0;right:0;
		height: 60px;
		display: flex;
		align-items: center;
		background-color: white;
		border-top: solid 1rpx #eee;
		"
	>
		<view @click="showComfirmModal=true" style="
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 0rpx;
			border-radius: 10rpx;
			box-shadow: 0 0 14px 0 #66666635;
			border: solid 1rpx #ddd;
			top:10px;bottom: 10px;left:10px;right: 10px; 
			position: absolute;
		">
				创建消息
		</view>
	</view> -->
</template>

<script>
	export default {
		async onLoad(){
			 
		},
		async onShow(){
			console.log('SSSSSSSSSSSSSSSS!')
			await this.updateList()
		},
		computed:{
			isSelected(){
				return (post)=>{
					return this.$officePost.posts.selected.some((item)=>item.id == post.id)
				}
			},
			selectedIndex(){
				return (post)=>{
					return this.$officePost.posts.selected.findIndex((item)=>item.id == post.id)
				}
			}
		}, 
		data() {
			return {
				posts:[]
			}
		},
		methods: {
			select(post) {
				if(this.isSelected(post))
				{
					const index = this.$officePost.posts.selected.findIndex((item,index)=>item.id==post.id)
					this.$officePost.posts.selected.splice(index,1)
					return
				}else{
					this.$officePost.posts.selected.push(post)
				}
			},
			async updateList(){
				let res = null //this.$localStorage.getItem('posts')
				
				if(!res)
				{
					 //res = await this.$http.get('/common/wx/get_published_list')
					 res = await this.$http.get('/common/wx/posts')
					 //this.$localStorage.setItem('posts',res)
				}
			
				this.posts = res.data.reverse()
				
				this.$officePost.posts.selected = []
				
				console.log(this.posts)
			},
			back(){
				uni.navigateBack()
			},
			onPost(post){
				uni.navigateTo({
					url: `post-preview?id=${post.id}`
				})
			},
			async createNews(){
				// uni.navigateTo({
				// 	url: '/pages/job/publish/job-offices/send-office-msg/tasks-selector'
				// })
				
				if(this.$officePost.posts.selected.length == 0)
				{
					uni.hideLoading()
					
					uni.showToast({
						title:'请至少选择一条图文',
						icon: 'none'
					})
					
					return
				}
				  
				uni.showLoading({
					title:'正在创建',
					mask:true
				})
				
				// console.log(this.$officePost.posts.selected)
				// console.log(this.$officePost.posts.selected.map(p=>p.id))
				// console.log(this.$officePost.posts.selected.map(p=>p.id).join(','))
				
				let res = await this.$http.post('/common/wx/create_news',{
					post_ids: this.$officePost.posts.selected.map(p=>p.id).join(',')
				})
				
				uni.hideLoading()
				
				uni.showToast({
					title:'创建成功'
				})
				 
				setTimeout(()=>{
					uni.navigateBack()
				},500)
			}
		}
	}
</script>

<style>

</style>
